<template>
  <el-container>
    <!--    头部导航栏-->
    <el-header style="height: 69px">
      <div class="left-message">
        <!--      点击logo进入home首页-->
        <a href="/">
          <h1 class="logo"></h1>
        </a>
        <!--      头部按钮信息-->
        <h1 v-for="(item,index) in headerMessage"
            :key="index">
          <router-link class="header-message" active-class="active" :to="{name:item.path}">
            {{ item.name }}
          </router-link>
        </h1>
        <!--      hot标识-->
        <sup class="hot-image">&nbsp;</sup>
      </div>
      <div class="right-message">
        <!--    头部搜索框-->
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuotianchong"></use>
        </svg>
        <el-autocomplete
            class="inline-input"
            placeholder="音乐/视频/电台/用户"></el-autocomplete>
        <!--        创作者中心-->
        <a class="creator-center-link" href="/">
          <div class="creator-center">创作者中心</div>
        </a>
        <!--        登陆按钮-->
        <div v-if="!whetherLogin" class="login-box">
          <a class="login-btn" href="#" @click="wantLogin">登陆</a>
        </div>
        <!--        用户登陆成功后头像的展示区域-->
        <div @mouseleave="hiddenUserInformation" @mouseover="displayUserInformation">
          <img class="profile-picture" v-show="whetherLogin" :src="avatarUrl"
               alt="">
          <user-info v-show="whetherUserInfo" class="user-info"></user-info>
        </div>
        <p class="username" v-show="whetherLogin">你好！ {{ username }}</p>
        <!--        todo-->
      </div>
    </el-header>
    <!--    登陆框-->
    <login-box></login-box>
  </el-container>
</template>

<script>
import '@/assets/font/serch'
import userInfo from "@/components/headers/userInfo";
import LoginBox from "@/components/login/LoginBox";

export default {
  components: {
    userInfo,
    LoginBox,
  },
  name: "headerMenu",
  data() {
    return {
      avatarUrl: '',//保存用户头像
      username: '',//保存用户名
      headerMessage: [{name: '发现音乐', path: 'Discover'},
        {name: '我的音乐', path: 'MyMusic'},
        {name: '朋友', path: 'Friend'},
        {name: '商城', path: 'Market'},
        {name: '下载客户端', path: 'Download'}],
      whetherLogin: false,//判断用户是否登陆
      whetherUserInfo: false,//用户详细信息是否显示
    }
  },
  created() {
    this.bus.$on('haveLogin', this.getHaveLogin)
  },
  methods: {
    wantLogin() {//用户点击头部的登陆按钮，标识用户想要登陆，此时发送自定义事件给登陆框，让登陆框显示
      this.bus.$emit('userWantLogin')
    },
    getHaveLogin(whetherLogin) {
      this.whetherLogin = whetherLogin
      this.username = this.$store.state.carousel.userDetails.profile.nickname
      this.avatarUrl = this.$store.state.carousel.userDetails.profile.avatarUrl
    },
    displayUserInformation() {//鼠标滑入显示用户信息
      this.whetherUserInfo = true
    },
    hiddenUserInformation() {//鼠标滑出隐藏用户信息
      this.whetherUserInfo = false
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .el-header { //改变头部栏的padding
  display: flex; //给头部栏打上flex
  padding: 0 10%; //确定padding
  align-items: center;
  justify-content: space-between; //头部左右分开对齐
  background-color: #242424;
  position: relative; //给头部打上相对定位
  .left-message {
    display: flex;
    //网易云logo样式
    .logo {
      height: 69px;
      width: 157px;
      background: url("../../assets/image/one.png") no-repeat;
      margin-right: 20px;
    }
    
    .header-message { //头部信息的样式
      display: inline-block;
      height: 69px;
      line-height: 69px;
      color: #b4b1af;
      font-size: 14px;
      padding: 0 19px;
      transition: all .3s linear;
      
      &:hover {
        color: #ffffff;
        background-color: #393939FF;
      }
    }
    
    .active {
      background-color: #393939FF;
    }
    
    .hot-image { //hot标识的样式
      background-image: url("../../assets/image/one.png");
      display: block;
      position: absolute;
      top: 20px;
      left: 750px;
      width: 28px;
      height: 19px;
      background-position: -190px 0;
    }
  }
  
  .right-message { //右部的盒子
    position: relative;
    display: flex;
    align-items: center;
    
    .icon { //搜索图标的样式
      position: absolute;
      top: 3px;
      left: 4px;
      height: 35px;
      width: 30px;
      font-size: 1.5em;
      z-index: 1000000;
      cursor: pointer;
    }
    
    .creator-center-link { //创作者中心的连接
      margin-left: 15px;
      
      .creator-center { //创作者中心的样式
        height: 32px;
        width: 90px;
        line-height: 32px;
        text-align: center;
        border-radius: 32px;
        border: 1px solid #787878;
        font-size: 12px;
        color: #cccccc;
        transition: all .3s linear;
        
        &:hover {
          border: 1px solid #ffffff;
        }
      }
    }
    
    .login-box { //登陆盒子样式
      margin-left: 15px;
      
      .login-btn { //登陆按钮样式
        font-size: 12px;
        color: #787878;
        transition: all .3s linear;
        
        &:hover {
          color: #b4b1af;
        }
      }
    }
    
    .profile-picture {
      height: 40px;
      width: 40px;
      border-radius: 20px;
      margin: 0 10px;
    }
    
    .username {
      color: #ffffff;
      font-size: 12px;
    }
    
    .user-info {
      position: absolute;
      top: 30px;
      right: 70px;
      z-index: 999999999;
    }
  }
}

/deep/ .el-input__inner { //改变头部搜索框的样式
  padding: 0 0 0 30px;
  border-radius: 20px;
}
</style>
